<template>
  <h2>糖尿病分析</h2>
  <hr style="margin-top: 10px" />
  <div id="main_echarts">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <div class="echarts-div" id="age_class">图1 relation</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { post, get, setItem, getItem, remItem, GetDataTest } from "../../utils/com";
import { defineComponent } from "vue";
export default defineComponent({
  name: "Diabetes1",
  setup(props) {
    const age_data = [];
    age_data["data"] = [];
    return {
      age_data,
    };
  },
  methods: {
    initCharts() {
      this.age_chart = this.$echarts.init(document.getElementById("age_class"));
      this.age_setOptions();
    },
    age_setOptions() {
      var data = this.age_data;
      //   console.log(22222, this.gender_chart, data);
      this.age_chart.setOption({
        title: {
          text: "各年龄患病与不患人数比较",
          left: "center",
        },
        legend: {},
        tooltip: {},
        dataset: {
          dimensions: ["add", "0", "1"],
          source: data["data"],
        },
        legend: {
          top: "10%",
        },
        tooltip: {
          trigger: "item",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "10%",
          top: "20%",
          right: "10%",
          bottom: "15%",
        },
        xAxis: { type: "category" },
        yAxis: {},
        series: [{ type: "bar" }, { type: "bar" }],
      });
    },
    age_axios() {
      const _this = this;
      var myget = get("http://127.0.0.1:8000/diabetes/age").then(function (res) {
        var mydata = [];
        console.log(res);

        for (let key in res) {
          var dict_data = {};
          dict_data["add"] = key;
          dict_data["0"] = res[key]["0"];
          dict_data["1"] = res[key]["1"];
          // console.log(dict_data)
          mydata.push(dict_data);
        }

        _this.age_data["data"] = mydata;
        _this.age_setOptions();
        return res;
      });
    },
  },
  mounted() {
    const _this = this;
    this.initCharts();

    this.age_axios();
  },
});
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  margin: 5px;
  height: 500px;
  width: 100%;
  border-radius: 4px;
  min-height: 36px;
  border: 3px solid rgb(90, 89, 89);
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.echarts-div {
  height: 99%;
  width: 99%;
}
</style>
